<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="小公主家校本">
    <meta name="format-detection" content="telephone=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#FF69B4">
    <title>🌸 小公主家校本 🌸</title>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 50%, #FF1493 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
            position: relative;
            overflow-x: hidden;
        }
        
        /* 可爱的背景装饰 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
                radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
            background-size: 50px 50px, 60px 60px, 30px 30px;
            pointer-events: none;
            z-index: -1;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 25px;
            box-shadow: 0 20px 40px rgba(255, 105, 180, 0.3);
            overflow: hidden;
            border: 3px solid #FFB6C1;
        }
        
        .header {
            background: linear-gradient(135deg, #FF69B4, #FF1493);
            color: white;
            padding: 30px;
            text-align: center;
            position: relative;
        }
        
        .header::before {
            content: '🌸';
            position: absolute;
            top: 10px;
            left: 20px;
            font-size: 24px;
            animation: float 3s ease-in-out infinite;
        }
        
        .header::after {
            content: '🦄';
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 24px;
            animation: float 3s ease-in-out infinite reverse;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .input-section {
            padding: 30px;
            background: linear-gradient(135deg, #FFF0F5, #FFE4E1);
        }
        
        .input-tabs {
            display: flex;
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            background: #FFB6C1;
            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
        }
        
        .tab-btn {
            flex: 1;
            padding: 15px;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            touch-action: manipulation;
            color: white;
            position: relative;
        }
        
        .tab-btn.active {
            background: #FF1493;
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(255, 20, 147, 0.4);
        }
        
        .tab-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }
        
        .tab-content.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .text-input {
            width: 100%;
            padding: 15px;
            border: 3px solid #FFB6C1;
            border-radius: 15px;
            font-size: 16px;
            margin-bottom: 15px;
            background: white;
            transition: all 0.3s ease;
        }
        
        .text-input:focus {
            border-color: #FF1493;
            box-shadow: 0 0 20px rgba(255, 20, 147, 0.3);
            outline: none;
        }
        
        .add-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #FF69B4, #FF1493);
            color: white;
            border: none;
            border-radius: 15px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            touch-action: manipulation;
            box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4);
        }
        
        .add-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 105, 180, 0.5);
        }
        
        .add-btn:active {
            transform: translateY(0);
        }
        
        .voice-record-btn {
            width: 100%;
            padding: 20px;
            background: linear-gradient(135deg, #DA70D6, #BA55D3);
            color: white;
            border: none;
            border-radius: 15px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            touch-action: manipulation;
            box-shadow: 0 6px 20px rgba(218, 112, 214, 0.4);
        }
        
        .voice-record-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(218, 112, 214, 0.5);
        }
        
        .voice-record-btn.recording {
            background: linear-gradient(135deg, #FF6347, #FF4500);
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .upload-label {
            display: block;
            width: 100%;
            padding: 20px;
            background: linear-gradient(135deg, #FFA500, #FF8C00);
            color: white;
            border-radius: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            touch-action: manipulation;
            font-weight: bold;
            box-shadow: 0 6px 20px rgba(255, 165, 0, 0.4);
        }
        
        .upload-label:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 165, 0, 0.5);
        }
        
        #image-upload {
            display: none;
        }
        
        .homework-section {
            padding: 30px;
            background: linear-gradient(135deg, #FFF0F5, #FFE4E1);
        }
        
        .homework-header h2 {
            color: #FF1493;
            margin-bottom: 20px;
            text-align: center;
            font-size: 24px;
            text-shadow: 1px 1px 2px rgba(255, 20, 147, 0.3);
        }
        
        .homework-item {
            background: white;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
            border: 2px solid #FFB6C1;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .homework-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 105, 180, 0.3);
        }
        
        .homework-item.completed {
            background: linear-gradient(135deg, #98FB98, #90EE90);
            border-color: #32CD32;
            animation: completedSpectacular 1.2s ease-out;
            position: relative;
            overflow: visible;
        }
        
        @keyframes completedSpectacular {
            0% { 
                transform: scale(1) rotate(0deg);
                box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
            }
            25% { 
                transform: scale(1.15) rotate(5deg);
                box-shadow: 0 8px 30px rgba(50, 205, 50, 0.6);
            }
            50% { 
                transform: scale(1.1) rotate(-3deg);
                box-shadow: 0 12px 40px rgba(50, 205, 50, 0.8);
            }
            75% { 
                transform: scale(1.05) rotate(2deg);
                box-shadow: 0 8px 30px rgba(50, 205, 50, 0.6);
            }
            100% { 
                transform: scale(1) rotate(0deg);
                box-shadow: 0 6px 25px rgba(50, 205, 50, 0.4);
            }
        }
        
        .homework-item.completed::before {
            content: '🎉';
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 32px;
            animation: celebrationSpectacular 1.5s ease-out;
            z-index: 10;
        }
        
        .homework-item.completed::after {
            content: '✨';
            position: absolute;
            top: -5px;
            left: -5px;
            font-size: 24px;
            animation: sparkle 1.8s ease-out;
            z-index: 10;
        }
        
        @keyframes celebrationSpectacular {
            0% { 
                transform: scale(0) rotate(0deg);
                opacity: 0;
            }
            30% { 
                transform: scale(2) rotate(180deg);
                opacity: 1;
            }
            60% { 
                transform: scale(1.5) rotate(360deg);
                opacity: 1;
            }
            100% { 
                transform: scale(1) rotate(720deg);
                opacity: 1;
            }
        }
        
        @keyframes sparkle {
            0% { 
                transform: scale(0) rotate(0deg);
                opacity: 0;
            }
            40% { 
                transform: scale(1.8) rotate(-180deg);
                opacity: 1;
            }
            80% { 
                transform: scale(1.2) rotate(-360deg);
                opacity: 0.8;
            }
            100% { 
                transform: scale(1) rotate(-540deg);
                opacity: 1;
            }
        }
        
        .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
        }
        
        .filter-btn {
            padding: 10px 15px;
            border: 2px solid #FF69B4;
            background: white;
            color: #FF69B4;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            touch-action: manipulation;
            font-weight: bold;
            box-shadow: 0 2px 10px rgba(255, 105, 180, 0.2);
        }
        
        .filter-btn.active {
            background: #FF69B4;
            color: white;
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
        }
        
        .filter-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
        }
        
        .delete-all-btn {
            background: #FF6B6B !important;
            color: white !important;
            border-color: #FF6B6B !important;
        }
        
        .action-btn {
            padding: 8px 12px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            margin: 0 5px;
        }
        
        .complete-btn {
            background: linear-gradient(135deg, #32CD32, #228B22);
            color: white;
        }
        
        .incomplete-btn {
            background: linear-gradient(135deg, #87CEEB, #4682B4);
            color: white;
        }
        
        .delete-btn {
            background: linear-gradient(135deg, #FF6B6B, #FF4444);
            color: white;
        }
        
        .action-btn:hover {
            transform: scale(1.1);
        }
        
        .voice-status {
            margin-top: 15px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            text-align: center;
            font-weight: bold;
            color: #FF1493;
        }
        
        /* iOS优化 */
        @supports (-webkit-touch-callout: none) {
            .tab-btn, .add-btn, .voice-record-btn, .upload-label, .filter-btn, .action-btn {
                -webkit-tap-highlight-color: transparent;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                user-select: none;
            }
        }
        
        .ios-device .tab-btn:active,
        .ios-device .add-btn:active,
        .ios-device .voice-record-btn:active,
        .ios-device .upload-label:active,
        .ios-device .filter-btn:active,
        .ios-device .action-btn:active {
            transform: scale(0.95);
        }
        
        /* 可爱的加载动画 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #FFB6C1;
            border-radius: 50%;
            border-top-color: #FF1493;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 满屏撒花动画 */
        .confetti-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            overflow: hidden;
        }
        
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #FF69B4;
            animation: confetti-fall 3s linear infinite;
        }
        
        .confetti:nth-child(odd) {
            background: #FFB6C1;
            border-radius: 50%;
        }
        
        .confetti:nth-child(even) {
            background: #FF1493;
        }
        
        .confetti:nth-child(3n) {
            background: #32CD32;
            border-radius: 50%;
        }
        
        .confetti:nth-child(4n) {
            background: #FFD700;
        }
        
        .confetti:nth-child(5n) {
            background: #FF6347;
            border-radius: 50%;
        }
        
        @keyframes confetti-fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }
        
        /* 庆祝文字动画 */
        .celebration-text {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            font-weight: bold;
            color: #FF1493;
            text-shadow: 3px 3px 6px rgba(255, 20, 147, 0.5);
            z-index: 10000;
            pointer-events: none;
            animation: celebrationTextAnimation 3s ease-out;
        }
        
        @keyframes celebrationTextAnimation {
            0% {
                transform: translate(-50%, -50%) scale(0) rotate(0deg);
                opacity: 0;
            }
            30% {
                transform: translate(-50%, -50%) scale(1.5) rotate(10deg);
                opacity: 1;
            }
            60% {
                transform: translate(-50%, -50%) scale(1.2) rotate(-5deg);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(0) rotate(0deg);
                opacity: 0;
            }
        }
        
        /* 响应式设计 - 针对不同屏幕尺寸的适配 */
        
        /* 平板设备适配 (768px - 1024px) */
        @media (min-width: 768px) and (max-width: 1024px) {
            .container {
                max-width: 90%;
                margin: 20px auto;
            }
            
            .header h1 {
                font-size: 24px;
            }
            
            .tab-btn {
                font-size: 14px;
                padding: 12px;
            }
        }
        
        /* 手机设备适配 (最大767px) - 特别针对iPhone 11等设备 */
        @media (max-width: 767px) {
            .container {
                max-width: 95%;
                margin: 10px auto;
                border-radius: 20px;
            }
            
            .header {
                padding: 20px 15px;
            }
            
            .header h1 {
                font-size: 20px;
                line-height: 1.2;
                margin-bottom: 8px;
                /* 确保标题在一行显示 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            
            .header::before,
            .header::after {
                font-size: 18px;
                top: 8px;
            }
            
            .input-section,
            .homework-section {
                padding: 20px 15px;
            }
            
            .input-tabs {
                margin-bottom: 15px;
            }
            
            .tab-btn {
                font-size: 16px;
                padding: 18px 8px;
                /* 防止标签文字换行 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 0;
                min-height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .text-input {
                font-size: 14px;
                padding: 12px;
            }
            
            .add-btn,
            .voice-record-btn,
            .upload-label {
                font-size: 16px;
                padding: 15px;
            }
            
            .homework-item {
                padding: 15px;
                margin-bottom: 12px;
            }
            
            .homework-content h3 {
                font-size: 16px;
                margin-bottom: 8px;
            }
            
            .homework-meta {
                font-size: 12px;
            }
            
            .homework-actions {
                gap: 8px;
            }
            
            .homework-actions button {
                padding: 8px 12px;
                font-size: 12px;
            }
            
            .stats {
                padding: 15px;
            }
            
            .stats h3 {
                font-size: 16px;
            }
            
            .filter-buttons {
                gap: 8px;
                margin-bottom: 15px;
            }
            
            .filter-btn {
                padding: 8px 12px;
                font-size: 12px;
                /* 防止筛选按钮文字换行 */
                white-space: nowrap;
            }
            
            .celebration-text {
                font-size: 32px;
            }
        }
        
        /* 超小屏幕设备适配 (最大480px) - 针对iPhone SE等小屏设备 */
        @media (max-width: 480px) {
            .container {
                max-width: 98%;
                margin: 5px auto;
            }
            
            .header h1 {
                font-size: 18px;
            }
            
            .tab-btn {
                font-size: 15px;
                padding: 16px 6px;
                min-height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .homework-actions {
                flex-direction: column;
                gap: 5px;
            }
            
            .homework-actions button {
                width: 100%;
            }
            
            .filter-buttons {
                flex-wrap: wrap;
            }
            
            .filter-btn {
                flex: 1;
                min-width: calc(50% - 4px);
            }
            
            .celebration-text {
                font-size: 24px;
            }
        }
        
        /* iPhone 11 Pro Max 和类似设备的特殊适配 */
        @media (max-width: 414px) {
            .header h1 {
                font-size: 16px;
                /* 强制单行显示，防止换行 */
                white-space: nowrap;
            }
            
            .tab-btn {
                font-size: 14px;
                padding: 15px 4px;
                /* 确保标签按钮文字不换行 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                min-height: 46px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🌸 小公主家校本 🌸</h1>
            <p>✨ 让学习变得更有趣 ✨</p>
        </div>
        
        <div class="input-section">
            <div class="input-tabs">
                <button class="tab-btn active" data-tab="text">📝 写作业</button>
                <button class="tab-btn" data-tab="voice">🎤 说作业</button>
                <button class="tab-btn" data-tab="image">📷 拍作业</button>
            </div>
            
            <div class="tab-content active" id="text-tab">
                <input type="text" id="text-input" class="text-input" placeholder="今天有什么作业呢？✨">
                <button class="add-btn">🌟 添加到作业本</button>
            </div>
            
            <div class="tab-content" id="voice-tab">
                <button id="voice-btn" class="voice-record-btn">🎤 点我说作业</button>
                <button id="voice-stop-btn" class="voice-record-btn" style="display: none; background: linear-gradient(135deg, #FF6B6B, #FF4444); margin-top: 10px;">⏹️ 停止录音</button>
                <div id="voice-status" class="voice-status">💡 点击按钮开始录音哦～</div>
            </div>
            
            <div class="tab-content" id="image-tab">
                <label for="image-upload" class="upload-label">
                    📷 选择作业照片
                </label>
                <input type="file" id="image-upload" accept="image/*,image/heic,image/heif">
            </div>
        </div>
        
        <div class="homework-section">
            <div class="homework-header">
                <h2>📚 我的作业清单</h2>
                <div class="filter-buttons">
                    <button class="filter-btn active" data-filter="all">🌈 全部</button>
                    <button class="filter-btn" data-filter="数学">🔢 数学</button>
                    <button class="filter-btn" data-filter="语文">📖 语文</button>
                    <button class="filter-btn" data-filter="英语">ABC 英语</button>
                    <button class="filter-btn" data-filter="科学">🔬 科学</button>
                    <button class="filter-btn" data-filter="兴趣班">🎨 兴趣班</button>
                    <button class="filter-btn delete-all-btn" data-action="delete-all">🗑️ 全部清空</button>
                </div>
            </div>
            <div id="homework-list"></div>
        </div>
    </div>
    
    <script>
        // 全局变量 - 存储所有作业的地方
        let homeworkList = [];
        let isRecording = false; // 是否正在录音
        let recognition = null; // 语音识别对象
        
        /**
         * 初始化应用 - 当页面加载完成后运行的主函数
         * 就像给应用做体检，确保所有功能都能正常工作
         */
        function initializeApp() {
            console.log('🌸 小公主家校本启动中...');
            loadHomeworkData(); // 加载之前保存的作业
            initSpeechRecognition(); // 初始化语音功能
            bindEvents(); // 绑定所有按钮的点击事件
            updateStats(); // 更新统计信息
            renderHomeworkList(); // 显示作业列表
            initIOSOptimizations(); // 针对iPhone/iPad的优化
            console.log('✨ 应用启动完成！');
        }
        
        /**
         * iOS设备优化 - 让应用在iPhone/iPad上运行更流畅
         * 就像给应用穿上合适的衣服
         */
        function initIOSOptimizations() {
            const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
            if (isIOS) {
                document.body.classList.add('ios-device');
                console.log('🍎 检测到iOS设备，启用特殊优化');
                
                // 防止双击缩放 - 避免误操作
                let lastTouchEnd = 0;
                document.addEventListener('touchend', function (event) {
                    const now = (new Date()).getTime();
                    if (now - lastTouchEnd <= 300) {
                        event.preventDefault();
                    }
                    lastTouchEnd = now;
                }, false);
            }
        }
        
        /**
         * 绑定事件 - 给所有按钮添加点击功能
         * 就像给每个按钮安装小耳朵，让它们能听到点击声音
         */
        function bindEvents() {
            console.log('🔧 开始安装按钮功能...');
            
            // 文本输入框 - 按回车键也能添加作业
            const textInput = document.getElementById('text-input');
            console.log('📝 文本输入框:', textInput);
            
            if (textInput) {
                textInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        console.log('⌨️ 按了回车键，添加作业');
                        addHomework();
                    }
                });
                console.log('✅ 文本输入功能安装完成');
            }
            
            // 标签页按钮 - 切换不同的输入方式
            const tabBtns = document.querySelectorAll('.tab-btn');
            console.log('🏷️ 找到标签按钮数量:', tabBtns.length);
            
            tabBtns.forEach((btn, index) => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('🏷️ 点击了标签:', this.dataset.tab);
                    switchTab(this.dataset.tab);
                });
                
                // iOS设备特殊处理 - 让触摸更灵敏
                if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
                    btn.addEventListener('touchstart', function(e) {
                        e.preventDefault();
                        this.style.transform = 'scale(0.95)';
                    }, { passive: false });
                    
                    btn.addEventListener('touchend', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        this.style.transform = 'scale(1)';
                        
                        setTimeout(() => {
                            switchTab(this.dataset.tab);
                        }, 50);
                    }, { passive: false });
                    
                    btn.addEventListener('touchcancel', function(e) {
                        this.style.transform = 'scale(1)';
                    });
                }
                
                console.log('✅ 标签按钮', index + 1, '安装完成');
            });
            
            // 筛选按钮 - 按科目查看作业
            const filterBtns = document.querySelectorAll('.filter-btn');
            console.log('🔍 找到筛选按钮数量:', filterBtns.length);
            
            filterBtns.forEach((btn, index) => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('🔍 点击了筛选按钮:', this.textContent);
                    
                    if (this.dataset.action === 'delete-all') {
                        deleteAllHomework();
                    } else if (this.dataset.filter) {
                        filterHomework(this.dataset.filter);
                    }
                });
                
                // iOS设备特殊处理
                if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
                    btn.addEventListener('touchstart', function(e) {
                        e.preventDefault();
                        this.style.transform = 'scale(0.95)';
                    }, { passive: false });
                    
                    btn.addEventListener('touchend', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        this.style.transform = 'scale(1)';
                        
                        setTimeout(() => {
                            if (this.dataset.action === 'delete-all') {
                                deleteAllHomework();
                            } else if (this.dataset.filter) {
                                filterHomework(this.dataset.filter);
                            }
                        }, 50);
                    }, { passive: false });
                    
                    btn.addEventListener('touchcancel', function(e) {
                        this.style.transform = 'scale(1)';
                    });
                }
                
                console.log('✅ 筛选按钮', index + 1, '安装完成');
            });
            
            // 语音按钮 - 说话录制作业
            const voiceBtn = document.getElementById('voice-btn');
            const voiceStopBtn = document.getElementById('voice-stop-btn');
            console.log('🎤 语音按钮:', voiceBtn);
            console.log('⏹️ 停止录音按钮:', voiceStopBtn);
            
            if (voiceBtn) {
                voiceBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('🎤 点击了语音按钮');
                    toggleVoiceRecording();
                });
                
                console.log('✅ 语音按钮安装完成');
                
                // iOS设备特殊处理
                if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
                    voiceBtn.addEventListener('touchstart', function(e) {
                        e.preventDefault();
                        this.style.transform = 'scale(0.95)';
                    }, { passive: false });
                    
                    voiceBtn.addEventListener('touchend', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        this.style.transform = 'scale(1)';
                        
                        setTimeout(() => {
                            toggleVoiceRecording();
                        }, 50);
                    }, { passive: false });
                    
                    voiceBtn.addEventListener('touchcancel', function(e) {
                        this.style.transform = 'scale(1)';
                    });
                }
            }
            
            // 停止录音按钮
            if (voiceStopBtn) {
                voiceStopBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('⏹️ 点击了停止录音按钮');
                    stopVoiceRecording();
                });
                
                console.log('✅ 停止录音按钮安装完成');
                
                // iOS设备特殊处理
                if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
                    voiceStopBtn.addEventListener('touchstart', function(e) {
                        e.preventDefault();
                        this.style.transform = 'scale(0.95)';
                    }, { passive: false });
                    
                    voiceStopBtn.addEventListener('touchend', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        this.style.transform = 'scale(1)';
                        
                        setTimeout(() => {
                            stopVoiceRecording();
                        }, 50);
                    }, { passive: false });
                    
                    voiceStopBtn.addEventListener('touchcancel', function(e) {
                        this.style.transform = 'scale(1)';
                    });
                }
            }
            
            // 图片上传 - 拍照添加作业
            const imageUpload = document.getElementById('image-upload');
            console.log('📷 图片上传:', imageUpload);
            
            if (imageUpload) {
                imageUpload.addEventListener('change', function(e) {
                    console.log('📷 选择了图片');
                    handleImageUpload(e);
                });
                
                console.log('✅ 图片上传功能安装完成');
            }
            
            // 添加作业按钮 - 主要的添加功能
            const addBtn = document.querySelector('.add-btn');
            console.log('🌟 添加按钮:', addBtn);
            
            if (addBtn) {
                addBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('🌟 点击了添加按钮');
                    addHomework();
                });
                
                console.log('✅ 添加按钮安装完成');
                
                // iOS设备特殊处理
                if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
                    addBtn.addEventListener('touchstart', function(e) {
                        e.preventDefault();
                        this.style.transform = 'scale(0.95)';
                    }, { passive: false });
                    
                    addBtn.addEventListener('touchend', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        this.style.transform = 'scale(1)';
                        
                        setTimeout(() => {
                            addHomework();
                        }, 50);
                    }, { passive: false });
                    
                    addBtn.addEventListener('touchcancel', function(e) {
                        this.style.transform = 'scale(1)';
                    });
                }
            }
            
            console.log('🎉 所有按钮功能安装完成！');
        }
        
        /**
         * 切换标签页 - 在不同输入方式之间切换
         * 就像翻书一样，翻到不同的页面
         */
        function switchTab(tabName) {
            console.log('📖 翻到页面:', tabName);
            
            // 移除所有active类 - 把所有页面都合上
            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
            
            // 添加active类到当前标签 - 打开选中的页面
            document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
            document.getElementById(`${tabName}-tab`).classList.add('active');
        }
        
        /**
         * 添加作业 - 把新作业加到列表里
         * 就像在作业本上写下新的任务
         */
        function addHomework() {
            console.log('📝 准备添加新作业');
            const input = document.getElementById('text-input');
            const content = input.value.trim();
            
            if (!content) {
                alert('📝 请先写下作业内容哦～');
                return;
            }
            
            // 创建新作业对象 - 就像制作一张作业卡片
            const homework = {
                id: Date.now(), // 用时间戳作为唯一ID
                content: content,
                subject: classifySubject(content), // 自动识别科目
                priority: classifyPriority(content), // 自动识别优先级
                completed: false, // 默认未完成
                createdAt: new Date().toLocaleString() // 创建时间
            };
            
            homeworkList.unshift(homework); // 添加到列表开头
            saveHomeworkData(); // 保存到本地存储
            updateStats(); // 更新统计
            renderHomeworkList(); // 重新显示列表
            
            input.value = ''; // 清空输入框
            
            // 震动反馈（如果设备支持）
            if (navigator.vibrate) {
                navigator.vibrate(50);
            }
            
            console.log('✅ 作业添加成功:', homework);
        }
        
        /**
         * 分类作业科目 - 根据内容自动判断是什么科目
         * 就像一个聪明的小助手，能猜出作业是哪一科的
         */
        function classifySubject(content) {
            const subjectKeywords = {
                '数学': ['数学', '算术', '几何', '代数', '计算', '题目', '公式', '加法', '减法', '乘法', '除法'],
                '语文': ['语文', '作文', '阅读', '古诗', '课文', '字词', '造句', '写字', '背诵'],
                '英语': ['英语', '单词', '语法', '听力', '口语', '翻译', 'English'],
                '科学': ['科学', '物理', '化学', '生物', '实验', '观察', '自然'],
                '兴趣班': ['画画', '音乐', '舞蹈', '书法', '围棋', '钢琴', '美术']
            };
            
            for (const [subject, keywords] of Object.entries(subjectKeywords)) {
                if (keywords.some(keyword => content.includes(keyword))) {
                    return subject;
                }
            }
            return '其他';
        }
        
        /**
         * 分类优先级 - 判断作业的紧急程度
         * 就像交通信号灯，红色紧急，绿色不急
         */
        function classifyPriority(content) {
            const priorityKeywords = {
                '高': ['紧急', '重要', '明天', '今天', '考试', '测验', '必须'],
                '低': ['复习', '预习', '练习', '可选', '有空']
            };
            
            for (const [priority, keywords] of Object.entries(priorityKeywords)) {
                if (keywords.some(keyword => content.includes(keyword))) {
                    return priority;
                }
            }
            return '中';
        }
        
        /**
         * 语音识别初始化 - 设置语音功能
         * 就像教应用听懂人话
         */
        function initSpeechRecognition() {
            const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            const isHTTPS = location.protocol === 'https:' || location.hostname === 'localhost' || location.hostname === '127.0.0.1';
            
            // 检测iOS版本（用于兼容性处理）
            let iOSVersion = null;
            if (isIOS) {
                const match = navigator.userAgent.match(/OS (\d+)_(\d+)/);
                if (match) {
                    iOSVersion = parseFloat(match[1] + '.' + match[2]);
                }
            }
            
            // 检查Web Speech API的实际支持情况
            const hasSpeechRecognition = 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window;
            const isIOSWithSpeechIssues = isIOS && isSafari && (iOSVersion >= 15.1); // iOS 15.1+有已知问题
            
            console.log('🎤 检查语音功能支持情况...');
            console.log('设备信息:', { isIOS, isSafari, isMobile, isHTTPS, iOSVersion, hasSpeechRecognition, isIOSWithSpeechIssues });
            
            if (hasSpeechRecognition) {
                // iOS兼容性检查和提示
                if (isIOSWithSpeechIssues) {
                    document.getElementById('voice-status').innerHTML = `
                        <div style="background: #ffebee; padding: 10px; border-radius: 8px; margin: 5px 0; border-left: 3px solid #f44336;">
                            <small style="color: #c62828;">⚠️ 检测到iOS ${iOSVersion}，语音功能可能不稳定</small><br>
                            <small style="color: #666;">💡 建议：使用手机输入法的语音转文字功能，或尝试更新Safari浏览器</small>
                        </div>
                    `;
                }
                
                // 显示环境提示但继续尝试初始化语音功能
                if (!isHTTPS) {
                    const isFileProtocol = location.protocol === 'file:';
                    if (isFileProtocol) {
                        if (isMobile) {
                            if (!isIOSWithSpeechIssues) {
                                document.getElementById('voice-status').innerHTML = `
                                    <div style="background: #fff3e0; padding: 10px; border-radius: 8px; margin: 5px 0; border-left: 3px solid #ff9800;">
                                        <small style="color: #e65100;">⚠️ 直接打开文件可能影响语音功能，建议使用手机输入法语音转文字</small>
                                    </div>
                                `;
                            }
                        } else {
                            document.getElementById('voice-status').innerHTML = `
                                <div style="background: #fff3e0; padding: 10px; border-radius: 8px; margin: 5px 0; border-left: 3px solid #ff9800;">
                                    <small style="color: #e65100;">⚠️ 直接打开文件可能影响语音功能，建议使用本地服务器</small>
                                </div>
                            `;
                        }
                    }
                }
                
                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                recognition = new SpeechRecognition();
                
                // 配置语音识别参数
                // 手机端优化：使用连续识别减少系统提示框
                // iOS问题版本特殊处理
                if (isIOSWithSpeechIssues) {
                    recognition.continuous = false; // iOS问题版本使用非连续模式
                    recognition.interimResults = false; // 禁用中间结果避免重复
                } else {
                    recognition.continuous = isMobile ? true : false; // 手机端连续识别，减少系统提示
                    recognition.interimResults = false; // 不要中间结果
                }
                recognition.lang = 'zh-CN'; // 中文识别
                recognition.maxAlternatives = 1; // 最多返回1个结果
                
                // 设置更长的录音时间（某些浏览器支持）
                if ('speechTimeout' in recognition) {
                    recognition.speechTimeout = 10000; // 10秒无声音超时
                }
                if ('speechTimeoutBuffer' in recognition) {
                    recognition.speechTimeoutBuffer = 2000; // 2秒缓冲
                }
                
                if (isIOS && isSafari) {
                    recognition.maxAlternatives = 1; // iOS Safari优化
                }
                
                // 开始录音时的处理
                recognition.onstart = function() {
                    console.log('🎤 开始录音');
                    isRecording = true;
                    const voiceBtn = document.getElementById('voice-btn');
                    const voiceStopBtn = document.getElementById('voice-stop-btn');
                    voiceBtn.textContent = '🔴 正在录音...';
                    voiceBtn.classList.add('recording');
                    voiceBtn.style.display = 'none';
                    voiceStopBtn.style.display = 'block';
                    document.getElementById('voice-status').innerHTML = '🎤 我在听，请说话... 点击停止按钮结束录音';
                };
                
                // 用于跟踪是否有识别结果
                let hasRecognitionResult = false;
                let lastTranscript = '';
                
                // 识别成功时的处理
                recognition.onresult = function(event) {
                    console.log('🎤 语音识别结果:', event);
                    let transcript = event.results[0][0].transcript;
                    
                    // iOS问题版本去重处理
                    if (isIOSWithSpeechIssues) {
                        // 检查是否有重复内容（iOS 15.1+的已知问题）
                        const words = transcript.split(' ');
                        const halfLength = Math.floor(words.length / 2);
                        const firstHalf = words.slice(0, halfLength).join(' ');
                        const secondHalf = words.slice(halfLength).join(' ');
                        
                        // 如果前半部分和后半部分相同，说明有重复
                        if (firstHalf === secondHalf && firstHalf.length > 0) {
                            transcript = firstHalf;
                            console.log('🔧 iOS重复结果已修复:', transcript);
                        }
                    }
                    
                    document.getElementById('text-input').value = transcript;
                    document.getElementById('voice-status').innerHTML = `✅ 听到了: ${transcript}`;
                    
                    // 记录识别结果
                    hasRecognitionResult = true;
                    lastTranscript = transcript;
                    
                    // PC端立即自动添加作业
                    if (!isMobile) {
                        setTimeout(() => {
                            addHomework();
                        }, 1000);
                    }
                };
                
                // 识别出错时的处理
                recognition.onerror = function(event) {
                    console.error('🎤 语音识别错误:', event.error);
                    let errorMsg = '❌ 语音识别失败';
                    
                    switch(event.error) {
                        case 'no-speech':
                            errorMsg = '🤐 没有听到声音，请重试';
                            break;
                        case 'audio-capture':
                            errorMsg = '🎤 无法访问麦克风，请检查权限';
                            break;
                        case 'not-allowed':
                            if (location.protocol === 'file:') {
                                if (isMobile) {
                                    errorMsg = `
                                        <div style="background: #ffebee; padding: 12px; border-radius: 8px; border-left: 3px solid #f44336;">
                                            <div style="color: #d32f2f; font-weight: bold; margin-bottom: 8px;">🚫 语音功能受限</div>
                                            <div style="font-size: 13px; color: #666; margin-bottom: 8px;">直接打开文件无法使用语音功能</div>
                                            <div style="font-size: 12px; color: #2e7d32;">💡 建议：使用手机输入法的语音转文字功能</div>
                                        </div>
                                    `;
                                } else {
                                    errorMsg = `
                                        <div style="background: #ffebee; padding: 12px; border-radius: 8px; border-left: 3px solid #f44336;">
                                            <div style="color: #d32f2f; font-weight: bold; margin-bottom: 8px;">🚫 语音功能受限</div>
                                            <div style="font-size: 13px; color: #666; margin-bottom: 8px;">需要在安全环境中运行</div>
                                            <div style="font-size: 12px; color: #2e7d32;">💡 解决：运行 <code style="background: #f5f5f5; padding: 1px 3px;">python -m http.server 8000</code> 然后访问 localhost</div>
                                        </div>
                                    `;
                                }
                            } else {
                                errorMsg = '🚫 麦克风权限被拒绝，请在设置中允许';
                            }
                            break;
                        case 'network':
                            errorMsg = '🌐 网络错误，请检查网络连接';
                            break;
                        case 'service-not-allowed':
                            errorMsg = `
                                <div style="background: #ffebee; padding: 12px; border-radius: 8px; border-left: 3px solid #f44336;">
                                    <div style="color: #d32f2f; font-weight: bold; margin-bottom: 8px;">🔒 服务不可用</div>
                                    <div style="font-size: 13px; color: #666;">当前环境不支持语音识别服务</div>
                                </div>
                            `;
                            break;
                    }
                    
                    document.getElementById('voice-status').innerHTML = errorMsg;
                    resetVoiceButton();
                };
                
                // 录音结束时的处理
                recognition.onend = function() {
                    console.log('🎤 录音结束');
                    isRecording = false;
                    resetVoiceButton();
                    
                    // 手机端：如果有识别结果，自动添加作业
                    if (isMobile && hasRecognitionResult && lastTranscript) {
                        console.log('📱 手机端自动添加作业:', lastTranscript);
                        setTimeout(() => {
                            addHomework();
                            // 重置标记
                            hasRecognitionResult = false;
                            lastTranscript = '';
                        }, 500);
                    }
                };
                
                console.log('✅ 语音识别功能初始化成功');
            } else {
                // 针对不支持语音识别的情况提供建议
                if (isIOS) {
                    document.getElementById('voice-status').innerHTML = `
                        <div style="background: #ffebee; padding: 10px; border-radius: 8px; margin: 5px 0; border-left: 3px solid #f44336;">
                            <small style="color: #c62828;">❌ 当前Safari版本不支持语音识别</small><br>
                            <small style="color: #666;">💡 建议：使用手机键盘的语音输入功能</small><br>
                            <small style="color: #666;">📱 操作：点击输入框 → 点击键盘上的麦克风图标</small>
                        </div>
                    `;
                } else {
                    document.getElementById('voice-status').innerHTML = '❌ 您的浏览器不支持语音识别功能';
                }
                console.log('❌ 浏览器不支持语音识别');
            }
        }
        
        /**
         * 切换语音录制 - 开始或停止录音
         * 就像按录音机的开关
         */
        function toggleVoiceRecording() {
            console.log('🎤 切换录音状态，当前:', isRecording);
            
            if (!recognition) {
                alert('🎤 语音识别功能不可用');
                return;
            }
            
            if (isRecording) {
                recognition.stop();
            } else {
                try {
                    recognition.start();
                } catch (error) {
                    console.error('🎤 启动语音识别失败:', error);
                    let errorMsg = '❌ 启动语音识别失败，请重试';
                    
                    if (location.protocol === 'file:') {
                        if (isMobile) {
                            errorMsg = `
                                <div style="background: #ffebee; padding: 12px; border-radius: 8px; border-left: 3px solid #f44336;">
                                    <div style="color: #d32f2f; font-weight: bold; margin-bottom: 8px;">🚫 无法启动语音功能</div>
                                    <div style="font-size: 13px; color: #666; margin-bottom: 8px;">直接打开文件限制了语音功能</div>
                                    <div style="font-size: 12px; color: #2e7d32;">💡 建议：使用手机输入法的语音转文字功能</div>
                                </div>
                            `;
                        } else {
                            errorMsg = `
                                <div style="background: #ffebee; padding: 12px; border-radius: 8px; border-left: 3px solid #f44336;">
                                    <div style="color: #d32f2f; font-weight: bold; margin-bottom: 8px;">🚫 无法启动语音功能</div>
                                    <div style="font-size: 13px; color: #666; margin-bottom: 8px;">需要在安全环境中运行</div>
                                    <div style="font-size: 12px; color: #2e7d32;">💡 解决：运行本地服务器后重试</div>
                                </div>
                            `;
                        }
                    }
                    
                    document.getElementById('voice-status').innerHTML = errorMsg;
                }
            }
        }
        
        /**
         * 停止语音录制 - 手动停止录音
         * 就像按下录音机的停止键
         */
        function stopVoiceRecording() {
            console.log('⏹️ 手动停止录音');
            if (recognition && isRecording) {
                recognition.stop();
            }
        }
        
        /**
         * 重置语音按钮 - 恢复按钮原始状态
         * 就像把录音机关掉
         */
        function resetVoiceButton() {
            const voiceBtn = document.getElementById('voice-btn');
            const voiceStopBtn = document.getElementById('voice-stop-btn');
            voiceBtn.textContent = '🎤 点我说作业';
            voiceBtn.classList.remove('recording');
            voiceBtn.style.display = 'block';
            voiceStopBtn.style.display = 'none';
        }
        
        /**
         * 处理图片上传 - 当选择图片时的处理
         * 就像把照片贴到作业本上
         */
        function handleImageUpload(event) {
            console.log('📷 处理图片上传');
            const file = event.target.files[0];
            if (!file) return;
            
            console.log('📷 上传的文件:', file);
            
            // 检查文件类型
            const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/heic', 'image/heif'];
            if (!validTypes.includes(file.type) && !file.name.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp|heic|heif)$/)) {
                alert('📷 请选择有效的图片文件哦～');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const imageData = e.target.result;
                
                // 创建图片作业
                const homework = {
                    id: Date.now(),
                    content: `📷 图片作业 - ${file.name}`,
                    subject: '其他',
                    priority: '中',
                    completed: false,
                    createdAt: new Date().toLocaleString(),
                    image: imageData
                };
                
                homeworkList.unshift(homework);
                saveHomeworkData();
                updateStats();
                renderHomeworkList();
                
                // 清空文件输入
                event.target.value = '';
                
                console.log('✅ 图片作业添加成功');
            };
            
            reader.readAsDataURL(file);
        }
        
        /**
         * 过滤作业 - 按科目筛选显示
         * 就像用不同颜色的文件夹整理作业
         */
        function filterHomework(filter) {
            console.log('🔍 筛选作业:', filter);
            
            // 更新按钮状态
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.filter === filter) {
                    btn.classList.add('active');
                }
            });
            
            renderHomeworkList(filter);
        }
        
        /**
         * 删除所有作业 - 清空作业列表
         * 就像把作业本撕掉重新开始
         */
        function deleteAllHomework() {
            homeworkList = [];
            saveHomeworkData();
            updateStats();
            renderHomeworkList();
            console.log('🗑️ 所有作业已删除');
        }
        
        /**
         * 渲染作业列表 - 在页面上显示所有作业
         * 就像把作业卡片一张张贴在墙上
         */
        function renderHomeworkList(filter = 'all') {
            const listContainer = document.getElementById('homework-list');
            let filteredList = homeworkList;
            
            if (filter !== 'all') {
                filteredList = homeworkList.filter(homework => homework.subject === filter);
            }
            
            if (filteredList.length === 0) {
                listContainer.innerHTML = '<div style="text-align: center; color: #FF69B4; padding: 40px; font-size: 18px;">🌸 暂时没有作业哦～</div>';
                return;
            }
            
            listContainer.innerHTML = filteredList.map(homework => `
                <div class="homework-item ${homework.completed ? 'completed' : ''}">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                        <div style="flex: 1;">
                            <div style="font-size: 16px; margin-bottom: 8px; font-weight: bold; ${homework.completed ? 'text-decoration: line-through; color: #999;' : 'color: #333;'}">
                                ${homework.content}
                            </div>
                            <div style="font-size: 12px; color: #666; margin-bottom: 8px;">
                                📚 ${homework.subject} | ⭐ ${homework.priority} | 🕒 ${homework.createdAt}
                            </div>
                            ${homework.image ? `<img src="${homework.image}" style="max-width: 200px; max-height: 200px; border-radius: 8px; margin-top: 10px; border: 2px solid #FFB6C1;">` : ''}
                        </div>
                        <div style="display: flex; gap: 5px; margin-left: 15px; flex-direction: column;">
                            <button onclick="toggleHomework(${homework.id})" class="action-btn ${homework.completed ? 'complete-btn' : 'incomplete-btn'}">
                                ${homework.completed ? '✅ 完成' : '📝 待做'}
                            </button>
                            <button onclick="deleteHomework(${homework.id})" class="action-btn delete-btn">
                                🗑️ 删除
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        }
        
        /**
         * 切换作业完成状态 - 标记作业为完成或未完成
         * 就像在作业上打勾或擦掉勾
         */
        function toggleHomework(id) {
            const homework = homeworkList.find(h => h.id === id);
            if (homework) {
                homework.completed = !homework.completed;
                saveHomeworkData();
                updateStats();
                renderHomeworkList();
                
                // 完成作业时的庆祝效果
                if (homework.completed) {
                    console.log('🎉 作业完成了！');
                    
                    // 震动反馈
                    if (navigator.vibrate) {
                        navigator.vibrate([100, 50, 100, 50, 100]);
                    }
                    
                    // 检查是否所有作业都完成了
                    const allCompleted = homeworkList.every(h => h.completed);
                    if (allCompleted && homeworkList.length > 0) {
                        console.log('🎊 所有作业都完成了！开始满屏撒花！');
                        triggerFullScreenCelebration();
                    }
                }
            }
        }
        
        /**
         * 删除作业 - 从列表中移除某个作业
         * 就像把作业卡片撕掉
         */
        function deleteHomework(id) {
            homeworkList = homeworkList.filter(h => h.id !== id);
            saveHomeworkData();
            updateStats();
            renderHomeworkList();
            console.log('🗑️ 作业已删除');
        }
        
        /**
         * 更新统计 - 计算完成率等信息
         * 就像老师统计班级作业完成情况
         */
        function updateStats() {
            // 这里可以添加统计功能，比如完成率、总数等
            const total = homeworkList.length;
            const completed = homeworkList.filter(h => h.completed).length;
            console.log(`📊 统计: 总共${total}个作业，完成${completed}个`);
        }
        
        /**
         * 保存数据 - 把作业列表保存到浏览器本地
         * 就像把作业本放到书包里保存
         */
        function saveHomeworkData() {
            try {
                localStorage.setItem('homeworkList', JSON.stringify(homeworkList));
                console.log('💾 数据保存成功');
            } catch (error) {
                console.error('💾 保存数据失败:', error);
            }
        }
        
        /**
         * 满屏撒花庆祝 - 当所有作业完成时的超级庆祝
         * 就像过生日时的惊喜派对
         */
        function triggerFullScreenCelebration() {
            // 创建庆祝文字
            const celebrationText = document.createElement('div');
            celebrationText.className = 'celebration-text';
            celebrationText.innerHTML = '🎊 太棒了！所有作业都完成啦！🎊';
            document.body.appendChild(celebrationText);
            
            // 创建撒花容器
            const confettiContainer = document.createElement('div');
            confettiContainer.className = 'confetti-container';
            document.body.appendChild(confettiContainer);
            
            // 生成撒花效果
            for (let i = 0; i < 100; i++) {
                setTimeout(() => {
                    createConfetti(confettiContainer);
                }, i * 30); // 每30毫秒创建一个撒花
            }
            
            // 超强震动反馈
            if (navigator.vibrate) {
                navigator.vibrate([200, 100, 200, 100, 200, 100, 400]);
            }
            
            // 3秒后清理庆祝元素
            setTimeout(() => {
                if (celebrationText.parentNode) {
                    celebrationText.parentNode.removeChild(celebrationText);
                }
                if (confettiContainer.parentNode) {
                    confettiContainer.parentNode.removeChild(confettiContainer);
                }
            }, 3000);
        }
        
        /**
         * 创建单个撒花 - 生成一个彩色的小装饰
         * 就像从天空中飘落的彩色纸片
         */
        function createConfetti(container) {
            const confetti = document.createElement('div');
            confetti.className = 'confetti';
            
            // 随机位置和大小
            confetti.style.left = Math.random() * 100 + '%';
            confetti.style.animationDelay = Math.random() * 2 + 's';
            confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';
            
            // 随机大小
            const size = Math.random() * 8 + 6; // 6-14px
            confetti.style.width = size + 'px';
            confetti.style.height = size + 'px';
            
            container.appendChild(confetti);
            
            // 动画结束后移除元素
            confetti.addEventListener('animationend', () => {
                if (confetti.parentNode) {
                    confetti.parentNode.removeChild(confetti);
                }
            });
        }
        
        /**
         * 加载数据 - 从浏览器本地读取之前保存的作业
         * 就像从书包里拿出作业本
         */
        function loadHomeworkData() {
            try {
                const saved = localStorage.getItem('homeworkList');
                if (saved) {
                    homeworkList = JSON.parse(saved);
                    console.log('📖 数据加载成功，共', homeworkList.length, '个作业');
                } else {
                    console.log('📖 没有找到保存的数据，使用空列表');
                }
            } catch (error) {
                console.error('📖 加载数据失败:', error);
                homeworkList = [];
            }
        }
        
        /**
         * 显示服务器启动详细教程
         * 帮助用户一步步学会启动本地服务器
         */
        function showServerInstructions() {
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.8);
                z-index: 10000;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
                box-sizing: border-box;
            `;
            
            const content = document.createElement('div');
            content.style.cssText = `
                background: white;
                border-radius: 15px;
                padding: 30px;
                max-width: 600px;
                max-height: 80vh;
                overflow-y: auto;
                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            `;
            
            content.innerHTML = `
                <h2 style="color: #e91e63; margin-top: 0;">🚀 启动本地服务器教程</h2>
                
                <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <h3 style="color: #333; margin-top: 0;">📋 为什么需要本地服务器？</h3>
                    <p style="margin: 5px 0; line-height: 1.6;">浏览器为了安全，不允许直接打开的HTML文件使用语音识别功能。通过本地服务器访问就能解决这个问题。</p>
                </div>
                
                <div style="background: #e8f5e8; padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <h3 style="color: #2e7d32; margin-top: 0;">🔧 Windows系统操作步骤：</h3>
                    <ol style="line-height: 1.8; padding-left: 20px;">
                        <li><strong>打开文件夹：</strong>找到homework-manager-pink.html文件所在的文件夹</li>
                        <li><strong>打开命令行：</strong>在文件夹空白处按住Shift键，右键点击，选择"在此处打开PowerShell窗口"</li>
                        <li><strong>输入命令：</strong>在弹出的黑色窗口中输入：<br>
                            <code style="background: #f5f5f5; padding: 8px; display: block; margin: 5px 0; border-radius: 4px; font-family: monospace;">python -m http.server 8000</code>
                        </li>
                        <li><strong>等待启动：</strong>看到"Serving at http://0.0.0.0:8000"就表示成功了</li>
                        <li><strong>打开浏览器：</strong>在浏览器地址栏输入：<br>
                            <code style="background: #f5f5f5; padding: 8px; display: block; margin: 5px 0; border-radius: 4px; font-family: monospace;">http://localhost:8000/homework-manager-pink.html</code>
                        </li>
                    </ol>
                </div>
                
                <div style="background: #fff3e0; padding: 15px; border-radius: 8px; margin: 15px 0;">
                    <h3 style="color: #f57c00; margin-top: 0;">💡 小贴士：</h3>
                    <ul style="line-height: 1.6; padding-left: 20px;">
                        <li>如果提示"python不是内部或外部命令"，说明没有安装Python，可以从 <a href="https://www.python.org/downloads/" target="_blank" style="color: #2196f3;">python.org</a> 下载安装</li>
                        <li>服务器启动后，不要关闭命令行窗口，关闭了服务器就停止了</li>
                        <li>下次使用时，重复上述步骤即可</li>
                        <li>如果8000端口被占用，可以改用其他端口，如：python -m http.server 8080</li>
                    </ul>
                </div>
                
                <div style="text-align: center; margin-top: 25px;">
                    <button onclick="this.parentElement.parentElement.parentElement.remove()" 
                            style="background: #e91e63; color: white; border: none; padding: 12px 24px; border-radius: 25px; cursor: pointer; font-size: 16px; font-weight: bold;">
                        ✅ 我知道了
                    </button>
                </div>
            `;
            
            modal.appendChild(content);
            document.body.appendChild(modal);
            
            // 点击背景关闭
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.remove();
                }
            });
        }
        
        // 页面加载完成后初始化应用
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🌟 小公主家校本开始启动...');
            initializeApp();
        });
    </script>
</body>
</html>